import './SearchBar.scss';
import React from 'react';

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }
    this.handleChange = this.handleChange.bind(this)
  }

  
  handleChange(e) {
    this.setState({
      value: e.target.value
    })
  }

  render() {
    return (
      <div className="search-bar">
        <div className="bar-location">
          <div className="location-icon">
          <svg t="1623564107887" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2527" width="20" height="20"><path d="M387.217337 968.611777a114.141576 55.388223 0 1 0 228.283151 0 114.141576 55.388223 0 1 0-228.283151 0Z" fill="#e4d4b4" p-id="2528"></path><path d="M501.358913 977.433875c19.826983 0 42.38245-5.911715 48.385114-16.82565V254.658495H452.973799v705.94973c5.547917 10.732037 28.558131 16.825651 48.385114 16.82565z" fill="#e4d4b4" p-id="2529"></path><path d="M512 251.566214m-251.566214 0a251.566214 251.566214 0 1 0 503.132428 0 251.566214 251.566214 0 1 0-503.132428 0Z" fill="#e4d4b4" p-id="2530"></path><path d="M434.874856 134.787104m-57.57101 0a57.57101 57.57101 0 1 0 115.14202 0 57.57101 57.57101 0 1 0-115.14202 0Z" fill="#e4d4b4" p-id="2531"></path></svg>
          </div>
          <div className="location-text">深圳市</div>
        </div>
        <div className="search-btn">
          <input className="place-holder" onChange={this.handleChange} placeholder="炸鸡" />
        </div>
      </div>
    );
  }
}

export default SearchBar;